<template>
	<div class="register">
		<mt-header title="注册新用户" fixed class="header">
			<a href="javascript:;" @click="goBack" slot="left"><mt-button icon="back">返回</mt-button></a>
		</mt-header>
		<mt-field :state="state.username" label="中文姓名" placeholder="请输入真实中文姓名" v-model="username"></mt-field>
		<mt-cell class="sexSwitch" title="性别选择">{{sexSwitch?"男":"女"}}<mt-switch v-model="sexSwitch"></mt-switch></mt-cell>
		<mt-field :state="state.password1" label="设置密码" placeholder="请输入密码" type="password" v-model="password1"></mt-field>
		<mt-field :state="state.password" label="确认密码" placeholder="请确认密码" type="password" v-model="password"></mt-field>
		<mt-field :state="state.phone" label="手机号码" placeholder="请输入手机号" type="tel" v-model="phone"></mt-field>
		<mt-field :state="state.address" label="地区选择" id="address" readonly="readonly" placeholder="请选择地区" v-model="address"></mt-field>
		<mt-field :state="state.company" label="单位名称" placeholder="请输入单位名称" v-model="company"></mt-field>
		<mt-field :state="state.department" label="部门科室" placeholder="请输入部门科室" v-model="department"></mt-field>
		<mt-field :state="state.techtitles" label="技术职称" placeholder="请输入技术职称" v-model="techtitles"></mt-field>
		<mt-field class="invoiceInfo" label="开票信息" placeholder="请名称和税号两行填写" type="textarea" rows="4" v-model="invoiceInfo"></mt-field>
		<mt-button type="primary" class="registerBtn" @click="sureRegister">确认提交</mt-button>
	</div>
</template>

<script>
require("@/assets/LArea.min")
import { Toast,Indicator } from 'mint-ui';
export default{
	data(){
		return{
			username:"",
			sexSwitch:true,
			password1:"",
			password:"",
			phone:"",
			address:"",
			company:"",
			department:"",
			techtitles:"",
			invoiceInfo:"",
			state:{
				username:"",
				password1:"",
				password:"",
				phone:"",
				address:"",
				company:"",
				department:"",
				techtitles:"",
			}
		}
	},
	mounted(){
		//三级地址数据
		const addressData = require("@/assets/addressData")
		let area = new LArea();
		area.init({
			'trigger': '#address input',//触发选择控件的文本框，同时选择完毕后name属性输出到该位置
			'keys':{id:'id',name:'name'},//绑定数据源相关字段 id对应valueTo的value属性输出 name对应trigger的value属性输出
			'type':1,//数据源类型
			'data':addressData //数据源
		});
	},
	
	/* 验证 */
	watch:{
		username(val){
			this.state.username = val==""?"":"success"
		},
		password1(val){
			this.state.password1 = val==""?"":"success"
		},
		password(val){
			if(val==""){
				this.state.password = ""
			}else if(val == this.password1){
				this.state.password = "success"
			}else{
				this.state.password = "error"
			}
		},
		phone(val){
			this.state.phone = val==""?"":(val.length!=11?"error":"success")
		},
		address(val){
			this.state.address = val==""?"":"success"
		},
		company(val){
			this.state.company = val==""?"":"success"
		},
		department(val){
			this.state.department = val==""?"":"success"
		},
		techtitles(val){
			this.state.techtitles = val==""?"":"success"
		},
	},
	methods:{
		sureRegister(){
			//验证
			for (let key in this.state) {
				if(this.state[key]!=="success"){
					Toast({
						message: '输入有误',
						duration: 1000
					})
					return
				}
			}
			//注册
			Indicator.open();	//loading
			let url = this.baseUrl+"t_user/addMsg"
			let data = {
				company: this.company,
				companyInformation:this.invoiceInfo,
				department:this.department,
				title: this.techtitles,
				userName:this.username,
				userPassword: this.password,
				userPhone: this.phone,
				userSex:this.sexSwitch?"男":"女",
				address:this.address
			}
			this.$http.post(url,data).then(res=>{
				Indicator.close();	//关闭loading
				if(!res.data.userPhone){	//用户存在
					Toast({
						message: res.data,
						duration: 1000
					})
					return
				}
				Toast({
					message: '注册成功',
					duration: 1000
				})
				setTimeout(()=>{
					this.goBack()
				},1000)
			},err=>{
				Indicator.close();	//关闭loading
				console.log(err)
				Toast({
					message: '注册失败',
					duration: 1000
				})
			})
		},
		goBack(){
			window.history.length > 1
			? this.$router.go(-1)
			: this.$router.push('/')
		}
	}
}
</script>

<style lang="scss">
.register{
	padding: 40px 0 15px 0;
	width: 100%;
	.mint-cell-wrapper{
		padding-left: 0;
		border-left: 0;
		border-right: 0;
	}
	.mint-cell-text::after{
		content: "*";
		color: red;
	}
	.invoiceInfo{
		.mint-cell-wrapper{
			border-bottom: 1px solid #d9d9d9;
		}
		.mint-cell-text::after{
			content: " ";
		}
	}
	.registerBtn{
		width: 80%;
		margin-top: 20px;
	}
	.sexSwitch{
		text-align: left;
		.mint-cell-title{
			flex: 0;
		}
		.mint-cell-text{
			display: inline-block;
			width: 105px!important;
			text-align: center;
		}
		.mint-switch{
			margin-left: 20px;
		}
	}
	#address{
		.mintui-field-error:before{
			content:""
		}
	}
}
.gearArea {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 10px;
    background-color: rgba(0, 0, 0, 0.2);
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9900;
    overflow: hidden;
    animation-fill-mode: both
}

.area_ctrl {
    vertical-align: middle;
    background-color: #d5d8df;
    color: #000;
    margin: 0;
    height: auto;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 9901;
    overflow: hidden;
    transform: translate3d(0, 0, 0)
}

.slideInUp {
    animation: slideInUp .3s;
}

@keyframes slideInUp {
    from {
        transform: translate3d(0, 100%, 0)
    }
    to {
        transform: translate3d(0, 0, 0)
    }
}

.area_roll {
    display: flex;
    width: 100%;
    height: auto;
    overflow: hidden;
    background-color: transparent;
    -webkit-mask: -webkit-gradient(linear, 0% 50%, 0% 100%, from(#debb47), to(rgba(36, 142, 36, 0)));
    -webkit-mask: -webkit-linear-gradient(top, #debb47 50%, rgba(36, 142, 36, 0))
}

.area_roll>div {
    font-size: 1.6em;
    height: 10em;
    float: left;
    background-color: transparent;
    position: relative;
    overflow: hidden;
    flex: 1
}

.area_roll>div .gear {
    width: 100%;
    float: left;
    position: absolute;
    z-index: 9902;
    margin-top: 4em
}

.area_roll_mask {
    -webkit-mask: -webkit-gradient(linear, 0% 40%, 0% 0%, from(#debb47), to(rgba(36, 142, 36, 0)));
    -webkit-mask: -webkit-linear-gradient(bottom, #debb47 50%, rgba(36, 142, 36, 0));
    padding: 0
}

.area_grid {
    position: relative;
    top: 4em;
    width: 100%;
    height: 2em;
    margin: 0;
    box-sizing: border-box;
    z-index: 0;
    border-top: 1px solid #abaeb5;
    border-bottom: 1px solid #abaeb5
}

.area_roll>div:nth-child(3) .area_grid>div {
    left: 42%
}

.area_btn {
    color: #0575f2;
    font-size: 1.6em;
    line-height: 1em;
    text-align: center;
    padding: .8em 1em
}

.area_btn_box:before,
.area_btn_box:after {
    content: '';
    position: absolute;
    height: 1px;
    width: 100%;
    display: block;
    background-color: #96979b;
    z-index: 15;
    transform: scaleY(0.33)
}

.area_btn_box {
    display: flex;
    justify-content:space-between;
    align-items: stretch;
    background-color: #f1f2f4;
    position: relative
}

.area_btn_box:before {
    left: 0;
    top: 0;
    transform-origin: 50% 20%
}

.area_btn_box:after {
    left: 0;
    bottom: 0;
    transform-origin: 50% 70%
}
.tooth {
    height: 2em;
    line-height: 2em;
    text-align: center;
    display: flex;
    line-clamp: 1;
    flex-direction:column;
    overflow: hidden
}
</style>
